@charset "utf-8";
$fontsize:40;
@function r($px){
    @return $px/$fontsize * 1rem;
}

.gz_ani{
    animation: guiZe linear 1s .2s both;
}
@-webkit-keyframes guiZe{
        0% {
            opacity: 0;
            -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
         }
    
         50% {
           opacity: 1;
         }
    }
    @keyframes guiZe{
        0% {
            opacity: 0;
            -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
         }
    
         50% {
           opacity: 1;
         }
    }
.Box{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: all .5s;
    .gz_info{
                width: r(596);
                height: r(786);
                position: absolute;
                top: 300%;
                left: 11%;
                z-index: 99999;
                background: url(../img/gz_bg.png) no-repeat;
                background-size: cover;
                transition:.5;
                display: none;
                .close{
                    position: absolute;
                    right: r(-32);
                    top: r(-32);
                    width: r(86);
                    height: r(87);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                h4{
                    text-align: center;
                    font-size: r(34);
                    font-weight: normal;
                    letter-spacing: r(2);
                    padding: r(220) 0 r(60) 0;
                }
                ul{
                    li{
                        margin-left: r(40);
                        margin-bottom: r(34);
                        width: r(504);
                        p{
                            width: 100%;
                            font-size: r(24);
                            line-height: r(30);
                            text-align: justify;
                        }
                    }
                }
                >p{
                  font-size: r(21);  
                  text-align: center;
                  padding-top: r(56);
                }
                .sm_logo{
                    position: absolute;
                    bottom: 3%;
                    left: 35%;
                    width: r(168);
                    height: r(43);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
    }
    .dui_jiang{
        width: r(596);
                height: r(786);
                position: absolute;
                top: 300%;
                left: 11%;
                z-index: 999999;
                background: url(../img/gz_bg.png) no-repeat;
                background-size: 100% auto;
                .close{
                    position: absolute;
                    right: r(-32);
                    top: r(-32);
                    width: r(86);
                    height: r(87);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                h5{
                    font-size: r(28);
                    letter-spacing: r(2);
                    margin-left: r(54);
                    color: #7d4611;
                    &:first-of-type{
                        padding-top: r(257);
                    }
                }
                .erWei{
                    width: r(220);
                    height: r(220);
                    margin: r(72) auto 0;
                    border: r(1) solid #939293;
                }
                >p{
                  font-size: r(25);  
                  text-align: center;
                  padding-top: r(46);
                  color: #7d4610;
                }
                .sm_logo{
                    position: absolute;
                    bottom: 3%;
                    left: 35%;
                    width: r(168);
                    height: r(43);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
    }
    #dui_jiang{
        display: none;
    }
    header{
        width: 100%;
        height: r(208);
        height: auto;
        img{
            width: 100%;
            height: 100%;
        }
        .info{
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            .zuo{
                width: r(43);
                height: r(43);
                margin-left: r(14);
                margin-top: r(25);
                float: left;
                >img{
                    vertical-align: top;
                    width: 100%;
                    height: auto;
                }
            }
            .you{
                float: right;
                width: r(43.7);
                height: r(43.7);
                margin-right: r(16);
                margin-top: r(24);
                >img{
                    vertical-align: top;
                    width: 100%;
                    height: auto;
                }
            }
            .anim{
                 -webkit-animation: rota infinite;
                animation: rota infinite;
                -webkit-animation-duration: 2s;
                animation-duration: 2s;
                @-webkit-keyframes rota{
                    0%{
                        -webkit-transform: rotate(0);
                        transform: rotate(0);
                    }
                    50%{
                        -webkit-transform: rotate(180deg);
                        transform: rotate(180deg);
                    }
                    100%{
                        -webkit-transform: rotate(360deg);
                        transform: rotate(360deg);
                    }
                }
                @keyframes rota{
                    0%{
                        -webkit-transform: rotate(0);
                        transform: rotate(0);
                    }
                    50%{
                        -webkit-transform: rotate(180deg);
                        transform: rotate(180deg);
                    }
                    100%{
                        -webkit-ransform: rotate(360deg);
                        transform: rotate(360deg);
                    }
                }
            }
        }
    }
    section{
        width: 100%;
        height: auto;
        overflow-y: scroll;
        margin-top: r(-11);
        position: relative;
        transition: all .5s;
        .cj_bg{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9999;
            background: url(../img/cj_bg_tu.png) no-repeat;
            background-size: 100% auto;
            transition: 1s;
            display: none;
            .gong_xi{
                width: r(335);
                height: r(74);
                margin: 0 auto;
                line-height: r(465);
                img{
                    min-width: 100%;
                    width: 100%;
                    height: 100%;
                }
            }
            .big_btn{
                width: r(526);
                height: r(127);
                background: #e5004f;
                border-radius: r(10);
                line-height: r(167);
                margin: 0 auto;
                margin-top: r(570);
                border: r(1) solid #7d0000;
                box-shadow: r(2) r(2) r(40) #450a15;
                transition: 1s;
                &:hover,
                &:active,
                &:focus
                {
                    background: orangered;
                }
                .btn_tj{
                    width: r(248);
                    height: r(70);
                    margin: 0 auto;
                    img{
                        min-width: 100%;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .zhong_jiang{
            position: absolute !important;
            top: 36% !important;
            left:33% !important;
            z-index: 10000 !important;
            transition: 1s !important;
        }
        ul{
            width: 100%;
            overflow: hidden;
            .active {
                border: r(2) solid black;
                transition: .3s;
                transform: scale(1.1);
                position: relative;
                z-index: 5555;
                box-shadow: r(5) r(5) rgba(255,0,0,.8);
            }
            li{
                float: left;
                width: 32.5%;
                border-radius: 3%;
                height: r(275);
                margin-left: r(2);
                margin-bottom: r(3);
                box-shadow: r(3) r(3) darkgray;
                border: r(2) solid white;
                p{
                    text-indent: r(14);
                    font-size: r(24);
                    color: white;
                    font-weight: 700;
                    text-shadow: 1px 1px 1px #5e0903;
                }
                p:first-of-type{
                    padding-top: r(20);
                }
                .li_info{
                    width: 100%;
                    height: 100%;
                    background: url(../img/cj_weijin.png) no-repeat;
                    background-size:r(216) r(209);
                    background-position: 134% 173%;
                }
                .li-2{
                    background: url(../img/cj_zhengtou.png) no-repeat;
                    background-size:r(186) r(148);
                    background-position: 76% 88%;
                }
                .li-3{
                    background: url(../img/cj_youhui.png) no-repeat;
                    background-size:r(195) r(152);
                    background-position: 76% 88%;
                }
                .li-4{
                    background: url(../img/cj_naiping.png) no-repeat;
                    background-size:r(166) r(165);
                    background-position: 76% 88%;
                }
                .li-5{
                    background: url(../img/cj_taiguo.png) no-repeat;
                    background-size:r(261) r(233);
                    background-position:-478% 168%;
                }
                .li-6{
                    background: url(../img/cj_tuishao.png) no-repeat;
                    background-size:r(180) r(207);
                    background-position: 128% 144%;
                }
                .li-7{
                    background: url(../img/cj_mianmo.png) no-repeat;
                    background-size:r(191) r(177);
                    background-position:168% 124%;
                }
                .li-8{
                    background: url(../img/cj_riben.png) no-repeat;
                    background-size:r(324) r(214);
                    background-position: -130% 222%;
                }
            }
            .action{
                float: left;
                width: 32.5%;
                border-radius: 3%;
                height: r(275);
                background: #c4004f;
                margin-left: r(2);
                margin-bottom: r(3);
                box-shadow: r(3) r(3) darkgray;
                position:relative;
                border: r(2) solid white;
                .kai_shi{
                    width: r(218);
                    height: r(229);
                    position: absolute;
                    top: -999px;
                    bottom: -999px;
                    left:-999px; 
                    right: -999px; 
                    margin: auto; 
                    max-height: 100%;
                    img{
                        width: 100%;
                        height: 100%;
                        max-height: 100%;
                    }
                }
                .sta_ani{
                     -webkit-animation-name: shake;
                    animation-name: shake;
                    -webkit-animation-delay: .4s;
                    animation-delay: .4s;
                    -webkit-animation-duration: 2s;
                    animation-duration: 2s;
                    -webkit-animation-iteration-count: infinite;
                    animation-iteration-count: infinite;
            @keyframes shake {
              0%, 87% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
              }
            
              5%, 25%, 45%, 65%, 85% {
                -webkit-transform: translate3d(-10px, 0, 0);
                transform: translate3d(-10px, 0, 0);
              }
            
              15%, 35%, 55%, 75% {
                -webkit-transform: translate3d(10px, 0, 0);
                transform: translate3d(10px, 0, 0);
              }
            }
            @-webkit-keyframes shake {
              0%, 87% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
              }
            
              5%, 25%, 45%, 65%, 85% {
                -webkit-transform: translate3d(-10px, 0, 0);
                transform: translate3d(-10px, 0, 0);
              }
            
              15%, 35%, 55%, 75% {
                -webkit-transform: translate3d(10px, 0, 0);
                transform: translate3d(10px, 0, 0);
              }
            }
                }
            }
            li.xue_hua{
                background: #c4004f;
                .xue_hua_bg{
                    width: 100%;
                    height: 100%;
                    background:url(../img/xue_hua.png) no-repeat r(10) r(84);
                    background-size:r(149) r(156);
                }
            }
            li.li_wu{
                background: #940e2b;
                .li_wu_bg{
                    width: 100%;
                    height: 100%;
                    background:url(../img/liwu.png) no-repeat r(10) r(84);
                    background-size:r(128) r(147);
                }
            }
        }
    }
}
